<script setup>
// ElConfigProvider 组件
import {ElConfigProvider} from 'element-plus'
// 引入中文包
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const props = defineProps({
  primaryKey: {
    type: String,
    default: 'id'   //多选收集的主键
  },
  list: {
    required: true,
    type: Array,
    default: [] //表格数据
  },
  columns: {
    required: true,
    type: Array,
    default: [] //表格列
  },
  total: {
    type: Number,
    default: 0 //总数据量
  },
  rowKey: {
    type: String,
    default: null //主键指定后配合children属性可以渲染子级数据
  },
  pagination: {
    type: Boolean,
    default: true //是否显示分页
  }
})

const searchData = defineModel('searchData')

const emits = defineEmits(['selectionChange', 'load'])

</script>

<template>
  <div class="card">
    <div class="line">
      <div class="left">
        <slot></slot>
      </div>
      <div class="right">
        <slot name="created"/>
      </div>
    </div>
    <div class="table">
      <el-table height="500" :max-height="500" :data="list" border
                :row-key="props.rowKey"
                @selection-change="(selection) => emits('selectionChange',selection.map(item => item[props.primaryKey]))">
        <template #empty>暂无数据</template>
        <template v-for="item in columns">
          <!--多选-->
          <el-table-column v-if="item.type && item.type === 'selection'" type="selection" :width="item.width"/>
          <!--操作区域-->
          <el-table-column v-else-if="item.key === 'action'" :label="item.title ?? '操作'" :width="item.width || 200">
            <template #default="{ row }">
              <slot name="action" :row="row"/>
            </template>
          </el-table-column>
          <!--其他区域-->
          <el-table-column :label="item.title" :width="item.width" v-else>
            <template #default="{ row }">
              <!--图片-->
              <template v-if="item.type && item.type === 'img'">
                <span v-if="row[item.key] && typeof row[item.key] === 'string'">
                  <el-image :src="row[item.key]"
                            :preview-src-list="[row[item.key]]"
                            :style="item.img ?? `width: 50px; height: 50px`"/>
                </span>
                <span v-else-if="Array.isArray(row[item.key])">
                  <el-badge type="warning" :value="row[item.key].length" :hidden="row[item.key].length === 1" :max="10"
                            :offset="[5,8]">
                  <el-image
                      :style="item.img ?? `width: 50px; height: 50px`"
                      :src="row[item.key][0]"
                      :preview-src-list="row[item.key]"
                  />
                  </el-badge>
                </span>
                <span v-else>暂无图片</span>
              </template>
              <!--自定义插槽-->
              <template v-else-if="item.slot">
                <slot :name="item.slot" :row="row"></slot>
              </template>
              <!--普通文本-->
              <template v-else-if="item.type === undefined || item.type === 'text'">
                <span>{{ row[item.key] }}</span>
              </template>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <ElConfigProvider :locale="zhCn">
        <el-pagination
            hide-on-single-page
            :page-size="searchData.size"
            :page-sizes="[5, 10, 30, 40, 50, 100]"
            @sizeChange="size => {
              searchData.size = size
              emits('load')
            }"
            v-if="pagination"
            @change="page => {
            if(searchData.page !== page){
            searchData.page = page
            emits('load')
        }
      }" layout="total,prev, pager, next,sizes" :total="total"/>
      </ElConfigProvider>

    </div>
  </div>
</template>

<style scoped lang="scss">
.card {
  width: 100%;
  padding: 0;

  .line {
    display: flex;
    justify-content: space-between;
  }

  .table {
    margin-top: 20px;
  }
}
</style>